<template>
  <div>
    <a-card :bordered="false" style="width: 900px;" class="product_index">
      <a-table :loading="loading" rowKey="id" size="middle" @change="handleTableChange" @refresh="getList"
      :rowClassName="getRowClassName" 
        :customRow="customRow"
        :columns="columns" :data-source="bizOrderProductList" :pagination="false">
        
        <span slot="codeSlot" slot-scope="{ record }">
          <a-icon type="qrcode" :style="{fontSize: '20px'}" /><!--  @click="printQcode(record)" -->
        </span>
      </a-table>
    </a-card>
  </div>
</template>
<script>
import { listBizOrderProduct, delBizOrderProduct, exportBizOrderProduct } from '@/api/biz/bizOrderProduct'
import {getBizOrder} from '@/api/biz/bizOrder'
import AdvanceTable from '@/components/pt/table/AdvanceTable'
import BizOrderProductAddForm from '@/views/biz/bizorder/modules/BizOrderProductAddForm'
import BizOrderProductEditForm from '@/views/biz/bizorder/modules/BizOrderProductEditForm'
import QRCode from 'qrcodejs2';
export default {
  name: 'BizOrderProduct',
  props: {
    orderId: {
      type: String,
      required: true
    },
    orderNumber: {
      type: String,
      required: false
    },
    address: {
      type: String,
      required: false
    },
    tenantId: {
      type: String,
      required: false
    },
    expanedIndex: {
      type: [Number,String],
      required: false,
      default:-1
    },
  },
  components: {
    AdvanceTable,
    BizOrderProductAddForm,
    BizOrderProductEditForm,
    QRCode
  },
  data() {
    return {
      showAddModal: false,
      showEditModal: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的主键集合
      selectedRowKeys: [],
      // 选中的数据集合
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // label的百分比
      labelCol: { span: 6 },
      // 内容区域的百分比
      wrapperCol: { span: 18 },
      // 销售单产品表格数据
      bizOrderProductList: [],
      currentIndex:0,
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 1000,
        productId: undefined,

        orderId: undefined,

        number: undefined,

        price: undefined

      },
      columns: [
        {
          title: '品牌',
          dataIndex: 'brand',
          ellipsis: true,
          align: 'center',
          width: '12.8%'
        },
        {
          title: '颜色',
          dataIndex: 'color',
          ellipsis: true,
          align: 'center',
          width: '12.8%'
        },
        {
          title: '型号',
          dataIndex: 'model',
          ellipsis: true,
          align: 'center',
          width: '12.8%'
        },
        {
          title: '规格',
          dataIndex: 'spec',
          ellipsis: true,
          align: 'center',
          width: '12.8%'
        },
        {
          title: '数量',
          dataIndex: 'number',
          align: 'center',
          width: '12.8%'
        },
        {
          title: '单价',
          dataIndex: 'price',
          align: 'center',
          width: '12.8%'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          align: 'center',
          width: '12.8%'
        },
        {
          title: '备注',
          align: 'center',
          width: '12.8%'
        }
      ]
    }
  },
  
  created() {
    this.getList()
  },
  methods: {
    /** 查询销售单产品列表 */
    getList() {
      this.loading = true
      this.queryParam.orderId = this.orderId
      getBizOrder(this.orderId).then(response => {
        let arr = response.data.productList || []
        this.bizOrderProductList = arr.map(v=>{
          let obj ={
            brand:v.bizProduct.brand,
            color:v.bizProduct.color,
            model:v.bizProduct.model,
            spec:v.bizProduct.spec,
          }
          return Object.assign(v,obj)
        })
        this.total = response.data.total
        this.loading = false
        if(this.currentIndex === 0 && this.bizOrderProductList.length){
          this.$emit('selectProduct',{productId:this.bizOrderProductList[0].productId,orderProductId:this.bizOrderProductList[0].id})
        }
      })
    },
    getRowClassName(row,index){
      if (index === this.currentIndex) {
        return 'selected_table_row'
      }
    },
    // printQcode() {
    //   let printContent = `<div style="text-align: center;margin:0 0 10px;border:1px solid #ccc;padding:10px;width:250px" id='XQ'></div>
    //                 <div style="text-align: center;margin:0 0 10px;width:250px" >
    //                     <p><strong>订单编号:${this.orderNumber}</strong></p>
    //                     <p><strong>地址:${this.address}</strong></p>
    //                 </div>`;
    //     document.getElementById("qrcode2").innerHTML = printContent;
    //     let new_str = document.getElementById("qrcode2").innerHTML; //获取指定打印区域
    //     //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
    //     document.body.innerHTML = new_str;
    //     for (let j = 0; j < 1; j++) {
    //       document.getElementById("XQ").innerHTML = ""; //置空
    //       new QRCode(document.getElementById("XQ"), {
    //         text: this.tenantId +":" + this.orderNumber,
    //         width: 250,
    //         height: 250,
    //         colorDark: "#000000",
    //         colorLight: "#ffffff",
    //       });
    //     }
    //     window.print(); //打印刚才新建的网页
    //     window.location.reload();
    //     return false;
    // },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 1000,
        productId: undefined,

        orderId: undefined,

        number: undefined,

        price: undefined

      }
      this.handleQuery()
    },
    /** 翻页操作 */
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 翻页操作 */
    onSizeChange(current, size) {
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = size
      this.getList()
    },
    /** 翻页操作 */
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 翻页操作 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 查询折叠和展开操作 */
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleAdd() {
      this.showAddModal = true
      this.$nextTick(() => (
        this.$refs.bizOrderProductAddForm.handleAdd()
      ))
    },
    handleUpdate(record, ids) {
      this.showEditModal = true
      this.$nextTick(() => (
        this.$refs.bizOrderProductEditForm.handleUpdate(record, ids)
      ))
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var that = this
      const bizOrderProductIds = row.id || this.ids
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk() {
          return delBizOrderProduct(bizOrderProductIds)
            .then(() => {
              that.onSelectChange([], [])
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
            })
        },
        onCancel() { }
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk() {
          return exportBizOrderProduct(that.queryParam)
            .then(response => {
              that.download(response.msg)
              that.$message.success(
                '导出成功',
                3
              )
            })
        },
        onCancel() { }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      if (sorter.field !== undefined && sorter.field !== null && sorter.field !== '') {
        this.queryParam.orderByColumn = 'a.' + sorter.field
        this.queryParam.isAsc = sorter.order
      }
      this.getList()
    },
    
    customRow (record,index) {
        return {
          on: {
            click: () => {
              this.$nextTick(() => {
                this.currentIndex = index
                let obj = {productId:record.productId,orderProductId:record.id}
                this.$emit('selectProduct',obj)
              })
            }
          }
        }
      }
  }
}
</script>
<style type="text/css">
  .selected_table_row{
    background-color: #F0F5FF;
  }
  .product_index .ant-table-body{
    height: auto !important;
    overflow: auto !important;
  }
</style>